<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>psm</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
        }

        html,
        body,
        div {
            box-sizing: border-box;
        }

        body {
            background: #F7F7F7;
            min-height: 100vh;
            padding-top: 24px;
        }

        .psm-contanier {
            width: 846px;
            margin: 0 auto 24px;
            background: white;
            padding: 48px 41px 40px;
        }

        .psm-title {
            font-size: 24px;
            font-weight: 600;
            line-height: 26px;
            text-align: center;
        }

        .psm-card-bar {
            margin-top: 40px;
            padding-left: 30px;
            height: 46px;
            line-height: 46px;
            color: #FFFFFF;
            font-size: 18px;
            background: #003861;
        }

        .psm-table {
            border-collapse: collapse;
            border: 1px solid #EDEDED;
            width: 100%;
            margin-top: 40px;
        }

        .psm-table thead {
            background: #F5F5F5;
        }

        .psm-table td,
        .psm-table th {
            border: 1px solid #EDEDED;
            height: 40px;
            line-height: 40px;
            padding: 0 12px;
        }

        .psm-table th:nth-child(1) {
            text-align: left;
            width: 140px;
        }

        .psm-table th:nth-child(2) {
            text-align: right;
            width: 140px;
        }

        .psm-table th:nth-child(3) {
            text-align: left;
        }

        .psm-table td:nth-child(1),
        .psm-table td:nth-child(3) {
            text-align: left;
        }

        .psm-table td:nth-child(2) {
            text-align: right;
        }

        .psm-chart-contanier {
            height: 536px;
            padding: 24px;
            border: 1px solid #E0E0E0;
            margin-top: 40px;
        }

        .psm-chart {
            height: 422px;
        }

        .psm-chart-tips {
            color: #8C8C8C;
            margin-top: 26px;
        }

        .highcharts-credits {
            display: none;
        }
    </style>
    <script src="https://cdn.highcharts.com.cn/10.2.1/highcharts.js"></script>
</head>

<body>
    <div class="psm-contanier">
        <div class="psm-title">
            PSM价格敏感度
        </div>
        <div class="psm-card-bar">
            汇总数据
        </div>
        <table class="psm-table">
            <thead>
                <tr>
                    <th>价格点</th>
                    <th>价格（元）</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>最优价格</td>
                    <td>6000</td>
                    <td>模拟数据就不会写的很长</td>
                </tr>
                <tr>
                    <td>可接受价格</td>
                    <td>7000</td>
                    <td>模拟数据就不会写的很长</td>
                </tr>
                <tr>
                    <td>最高定价点</td>
                    <td>8000</td>
                    <td>模拟数据就不会写的很长</td>
                </tr>
                <tr>
                    <td>最低定价点</td>
                    <td>5000</td>
                    <td>模拟数据就不会写的很长</td>
                </tr>
            </tbody>
        </table>
        <div class="psm-chart-contanier">
            <div class="psm-chart" id="psm-chart"></div>
            <div class="psm-chart-tips">
                “价格划算”“价格太低”从价格高至价格低进行累计占比统计，“价格较高”“价格太高”从价格低至价格高进行累计占比统计。
            </div>
        </div>
    </div>
</body>
<script>
    var chart = Highcharts.chart('psm-chart', {
        title: {
            text: 'PSM价格敏感度',
            layout: 'horizontal',
            align: 'left',
            verticalAlign: '0px'
        },
        colors: ['#0095FF', '#F79000', '#01AD56', '#FF4040'],
        chart: {
            backgroundColor: 'transparent',
            spacingLeft: 0,
            spacingRight: 0,
            spacingBottom: 0,
            spacingTop: 0
        },
        lang: {
            viewFullscreen: "全屏",
            contextButtonTitle: "图表导出菜单",
            decimalPoint: ".",
            downloadJPEG: "下载JPEG图片",
            downloadPDF: "下载PDF文件",
            downloadPNG: "下载PNG文件",
            downloadSVG: "下载SVG文件",
            drillUpText: "返回 {series.name}",
            loading: "加载中",
            months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            noData: "没有数据",
            numericSymbols: ["千", "兆", "G", "T", "P", "E"],
            printChart: "打印图表",
            resetZoom: "恢复缩放",
            resetZoomTitle: "恢复图表",
            shortMonths: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            thousandsSep: ",",
            weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"]
        },
        xAxis: {
            title: {
                text: '价格（元）'
            },
        },
        yAxis: {
            title: {
                text: '累计占比'
            },
            gridLineWidth: 0,
            lineWidth: 1
        },
        legend: {
            layout: 'horizontal',
            align: 'right',
            verticalAlign: 'top',
            symbolRadius: '50%',
            x: -40
        },
        plotOptions: {
            // series: {
            //     label: {
            //         connectorAllowed: false
            //     },
            //     pointStart: 2010
            // }
        },
        series: [{
            name: '价格划算',
            marker: {
                symbol: 'circle'
            },
            data: [[1, 1], [2, 1], [3, 1], [4, 1], [5, 1], [6, 1], [7, 1], [8, 1]]
        }, {
            name: '价格太低',
            marker: {
                symbol: 'circle'
            },
            data: [[1, 2], [2, 2], [3, 2], [4, 2], [5, 2], [6, 2], [7, 2], [8, 2]]
        }, {
            name: '价格较高',
            marker: {
                symbol: 'circle'
            },
            data: [[1, 3], [2, 3], [3, 3], [4, 3], [5, 3], [6, 3], [7, 3], [8, 3]]
        }, {
            name: '价格太高',
            marker: {
                symbol: 'circle'
            },
            data: [[1, 4], [2, 4], [3, 4], [4, 4], [5, 4], [6, 4], [7, 4], [8, 4]]
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
</script>

</html>